@import '../../var.scss';
page {
    height: 100%;
    background-color: $ranks-bgcolor;
}

.title {
    font-weight: 600;
    font-size: 36rpx;
}

.containers {
    .tab {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 554rpx;
        margin: 20rpx auto 0;
        .tab-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 116rpx;
            height: 42rpx;
            color: $bgcolor-light;
            font-size: 22rpx;
            background-color: #2caad6;
            border-radius: 21rpx;
        }
        .active {
            color: #000000;
            background-color: $bgcolor-light;
        }
    }
}

.content {
    position: relative;
    width: 690rpx;
    height: 75%;
    margin: 112rpx auto 0rpx;
    background-color: $bgcolor-light;
    border-radius: 20rpx;
    .header {
        display: flex;
        width: 100%;
        .headerList {
            position: relative;
            width: 230rpx;
            height: 343rpx;
            background: $bgcolor-light;
            border-radius: 20rpx;
            &:nth-child(1) {
                top: -55rpx;
                order: 2;
                box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.09);
            }
            &:nth-child(2) {
                order: 1;
            }
            &:nth-child(3) {
                order: 3;
            }
            .rankNumber {
                position: absolute;
                top: -26rpx;
                left: 96rpx;
                width: 40rpx;
                height: 48rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .topicImg {
                width: 120rpx;
                height: 120rpx;
                margin: 50rpx auto 0;
                border-radius: 12rpx;
                // image {
                //   width: 100%;
                //   height: 100%;
                // }
            }
            .name {
                width: 100%;
                margin-top: 20rpx;
                font-size: 28rpx;
                text-align: center;
            }
            .listTitle {
                width: 100%;
                margin-top: 5rpx;
                color: $info-color;
                font-size: 20rpx;
                text-align: center;
            }
            .num {
                width: 100%;
                margin-top: 5rpx;
                color: $primary-color;
                font-size: 30rpx;
                text-align: center;
            }
        }
    }
    .scrollBox {
        height: 60%;
        .list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 580rpx;
            height: 110rpx;
            margin: auto;
            border-bottom: 1rpx solid $border-color;
            .left {
                display: flex;
                align-items: center;
                .ranksBox {
                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    width: 39rpx;
                    height: 43rpx;
                    padding-top: 3rpx;
                    color: $bgcolor-light;
                    font-size: 20rpx;
                    background: url('') no-repeat;
                    background-size: 100% 100%;
                }
                .topic-avatar {
                    width: 52rpx;
                    height: 52rpx;
                    margin-left: 43rpx;
                    border-radius: 6rpx;
                }
                .topic-name {
                    margin-left: 20rpx;
                    color: $title-color;
                    font-size: 24rpx;
                }
            }
            .right {
                padding-right: 25rpx;
                color: $primary-color;
                font-size: 24rpx;
            }
        }
    }
    .bottomBox {
        position: absolute;
        bottom: 0rpx;
        width: 100%;
        height: 8%;
        background-color: $bgcolor-light;
        border-radius: 20rpx;
        .self {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: $info-color;
            font-size: 20rpx;
            .cat {
                width: 28rpx;
                height: 28rpx;
                margin: 0 7rpx 0;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            text {
                margin-right: 7rpx;
                color: $title-color;
            }
        }
    }
}